<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="table-container">
          <div class="table_headr">
            <a-row type="flex" justify="space-between">
              <a-col>
                <a-button shape="round" @click="back">
                  <a-icon type="left" />返回
                </a-button>
              </a-col>
              <a-col>
                <div class="labelSty">
                  <span>客户名称:</span><span class="dataColor">{{form.nickname}}</span>
                  <span>客户编号:</span>
<!--                  <span class="dataColor">{{ maskIdCard(form.idCard) }}</span>-->
                  <span class="dataColor">{{ form.serialNumber }}</span>
                </div>
              </a-col>
            </a-row>
          </div>
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form-model layout="inline" v-bind="searchModelConfig"
              @keyup.enter.native="searchQuery">
              <a-row v-bind="searchRowConfig">
                <a-col :span="5">
                  <a-form-model-item label="申请项目名称">
                    <ry-select v-model="queryParam.applyProject" :dataSource="$getDict('APPLY_PROJECT')" placeholder="请选择项目名称"></ry-select>
                  </a-form-model-item>
                </a-col>
                <a-col class="table-page-search-submitButtons" v-bind="searchColConfig">
                  <a-button @click="searchQuery" type="primary">查询</a-button>
                  <a-button @click="resetQuery" type="danger">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model>
          </div>

          <!-- 操作按钮区域 -->
          <div class="table-operator">
            <div>
              <a-button @click="handleAdd" type="primary" v-has="['projectInsert']">新增项目</a-button>
            </div>
            <div>
              <a-button @click="exportExcel" :loading="exportLoading" v-has="['projectExport']">导出项目</a-button>
            </div>
          </div>
          <!-- table区域-begin -->
          <a-row>
            <a-col :span="24">
              <ry-table
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :columns="columns" :loading="loading" :data-source="dataSource"
                :rowKey="record=>record.id" :pagination="ipagination" bordered
                :scroll="{ x: 'max-content'}">
                <template slot="applyProject" slot-scope="{text, record}">
                  <span v-if="record.applyProject">
                    <a-tag v-for="tag in text.split(',')" :key="tag" color="blue">
                      {{$getDictName('APPLY_PROJECT', tag)}}
                    </a-tag>
                  </span>
                  <span v-else>--</span>
                </template>
                <template slot="cardName" slot-scope="{text}">
                  <span v-if="text">
                    <a-tag color="blue">{{text}}</a-tag>
                  </span>
                  <span v-else>--</span>
                </template>
                <template slot="projectType" slot-scope="{text, record}">
                  <span>{{$getDictName('PROJECT_TYPE', text)}}</span>
                </template>
                <template slot="action" slot-scope="{record}">
                  <a-space size="middle">
                    <a-tooltip title="撤销后数据无法恢复">
                      <a-button v-has="['projectRevocation']" @click="applyProjectCancel(record.id)" type="primary" :disabled="record.cellInfos.length !== 0 || record.sampleRecords.length !== 0" v-if="record.projectType !== '3'">项目撤回</a-button>
                    </a-tooltip>
                    <a-tooltip>
                      <a-popconfirm title="确定核销吗?" @confirm="() => projectVerification(record.id)">
                        <a-button type="danger" v-if="record.applyProject.includes('ordinary') && record.projectType !== '3'" >项目核销</a-button>
                      </a-popconfirm>
                    </a-tooltip>
                    <!-- 新增编辑按钮 -->
                    <a-tooltip>
                      <a-popconfirm title="确定撤销吗?" @confirm="() => projectRevocation(record.id)">
                        <a-button v-has="['applyProjectRev']" type="default" v-if="record.applyProject.includes('ordinary') && record.projectType === '3'">
                          撤销
                        </a-button>
                      </a-popconfirm>
                    </a-tooltip>
                    <a-button type="default" @click="handleEdit(record.id)">
                      编辑
                    </a-button>
                  </a-space>
                </template>
              </ry-table>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
    <ApplyProjectModel ref="modalForm" @ModalOk="modalFormOk" :url="url" :id="form.id" :whetherVip="form.accountMemberCard !== null"></ApplyProjectModel>
  </div>
</template>

<script>
import { RyListMixin } from '@/ryweb'
import ApplyProjectModel from './modules/ApplyProjectModel.vue'
import { exportExcel } from '@/utils/export.js'
export default {
  name: '',
  mixins: [RyListMixin, exportExcel],
  components: { ApplyProjectModel },
  data () {
    return {
      reloadDict: true,
      show: false,
      isShow: false,
      initQuery: false,
      exportLoading: false,
      form: {},
      columns: [
        {
          title: '项目',
          align: 'center',
          dataIndex: 'applyProject',
          scopedSlots: { customRender: 'applyProject' }
        },
        {
          title: '会员卡',
          align: 'center',
          dataIndex: 'cardName',
          scopedSlots: { customRender: 'cardName' }
        },
        {
          title: '实验室',
          align: 'center',
          dataIndex: 'accountSource',
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'projectNumber',
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remake'
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '创建者',
          align: 'center',
          dataIndex: 'createBy'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'projectType',
          scopedSlots: { customRender: 'projectType' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: this.$api.permission.applyProject.applyProject,
        add: this.$api.permission.applyProject.insert,
        edit: this.$api.permission.applyProject.update,
        byId: this.$api.permission.applyProject.byId,
        listMemberCard: this.$api.permission.memberCard.selectMemberCard,
        selectById: this.$api.permission.account.byId,
        delById: this.$api.permission.applyProject.deleteById,
        exportFile: this.$api.permission.applyProject.exportFile
      }
    }
  },
  props: {
    treeId: {
      type: String
    }
  },
  methods: {
    async handleEdit(id) {
      console.log('点击了编辑按钮，id:', id)
      try {
        const res = await this.$get(`${this.url.byId}/${id}`)
        if (res.code === 200 && res.data) {
          // 打开弹框并传入回显数据
          this.$refs.modalForm.edit(res.data)
        } else {
          this.$message.error('加载详情失败')
        }
      } catch (e) {
        this.$message.error('请求异常')
      }
    },
    // 编辑时调用
    edit(record) {
      this.form = { ...record } // 回显数据
      this.visible = true
    },
    async handleOk() {
      const api = this.form.id ? this.url.edit : this.url.add
      const res = await this.$post(api, this.form)
      if (res.code === 200) {
        this.$message.success(this.form.id ? '编辑成功' : '新增成功')
        this.$emit('ModalOk')
        this.visible = false
      } else {
        this.$message.error(res.msg || '操作失败')
      }
    },
    back () {
      this.$router.go(-1)
    },
    maskIdCard(idCard) {
      if (!idCard) return '';
      const len = idCard.length;
      if (len <= 8) return idCard; // 太短不处理
      return idCard.substring(0, 6) + '*'.repeat(len - 10) + idCard.substring(len - 4);
    },
    async exportExcel () {
      this.exportLoading = true
      await this.exportXlsNotDate(this.url.exportFile, this.queryParam, '项目数据导出文件', false)
      this.exportLoading = false
    },
    resetQuery () {
      this.queryParam = {
        accountId: this.form.id
      }
      this.loadData(1)
    },
    applyProjectCancel (id) {
      this.$postType(this.url.delById, { id: id }).then(res => {
        if (res.code === 200) {
          this.$message.success('撤销成功')
          this.loadData(1)
        } else {
          this.$message.error('撤销失败')
        }
      })
    },
    projectVerification (id) {
      this.$post(this.url.edit, { id: id, projectType: "3" }).then(res => {
        if (res.code === 200) {
          this.$message.success('核销成功')
          this.loadData(1)
        } else {
          this.$message.error('核销失败')
        }
      })
    },
    projectRevocation (id) {
      this.$post(this.url.edit, { id: id, projectType: "0" }).then(res => {
        if (res.code === 200) {
          this.$message.success('核销成功')
          this.loadData(1)
        } else {
          this.$message.error('核销失败')
        }
      })
    },
  },
  // 修改缓存
  activated () {
    const self = this
    if (self.$route.query.value) {
      let form = JSON.parse(decodeURIComponent(self.$route.query.value))
      console.log(form)
      self.form = form
      self.queryParam = {
        accountId: form.id
      }
    }
    this.loadData(1)
  },
  created () {
  },
  mounted () {
  },
}
</script>

<style lang="less">
#LabelInfoMaintain {
  border-left: 1px solid #f4f4f4;
}
.table-operator {
  display: flex;
  justify-content: space-between;
  align-content: center;
  .setting {
    margin-top: 5px;
    font-size: 16px;
    color: #00bbbb;
  }
}
.age_box {
  width: 100%;
  padding: 0;
  .ant-form-item {
    width: 100%;
    text-align: center;
  }
  .ant-input {
    width: 40%;
  }
}
.ant-col .ant-col-1 {
  padding: -12px;
}
.table-page-search-wrapper {
  margin-left: 0rem;
}
.table_headr {
  color: #000000;
  .labelSty {
    margin-right: 30px;
    font-size: 18px;
  }
  .ant-btn {
    text-align: center;
    background: #f2f2f2;
    color: #868686;
    border: 0;
  }
  .dataColor {
    color: #3ec2c9;
    padding: 0 10px 0 10px;
  }
  .table-search-wrapper {
    display: flex;
    justify-content: center;
    align-content: center;
    .ant-input {
      width: 100%;
    }
    .table-search-submitButtons {
      display: flex;
      justify-content: center;
      align-content: center;
      .ant-btn {
        background: #989eab;
        color: #fff;
        margin-right: 10px;
      }
      .ant-btn:first-child {
        background: #ffac54;
      }
    }
  }
}
</style>
